<template>
  <view class="custom-tabbar">
    <view class="tabbar-container">
      <view 
        v-for="(item, index) in tabList" 
        :key="index"
        class="tab-item"
        :class="{ active: current === index }"
        @click="switchTab(index)"
      >
        <view class="tab-icon">{{ item.icon }}</view>
        <text class="tab-text">{{ item.text }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const current = ref(0)

const tabList = [
  {
    pagePath: '/pages/wheel/index',
    text: '转盘',
    icon: '🎯'
  },
  {
    pagePath: '/pages/outfit/index',
    text: '衣橱',
    icon: '👗'
  },
  {
    pagePath: '/pages/collage/index',
    text: '搭配',
    icon: '✨'
  }
]

// 根据当前页面路径设置 current
onLoad(() => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const route = '/' + currentPage.route
  
  const index = tabList.findIndex(item => item.pagePath === route)
  if (index !== -1) {
    current.value = index
  }
})

function switchTab(index) {
  if (current.value === index) return
  
  // 触觉反馈
  uni.vibrateShort({ type: 'light' })
  
  uni.switchTab({
    url: tabList[index].pagePath,
    success: () => {
      current.value = index
    }
  })
}
</script>

<style lang="scss" scoped>
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  padding: 16rpx 32rpx;
  padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
  pointer-events: none;
}

.tabbar-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20rpx);
  border-radius: 60rpx;
  padding: 16rpx 24rpx;
  box-shadow: 0 -8rpx 32rpx rgba(255, 182, 193, 0.25), 0 4rpx 16rpx rgba(216, 112, 147, 0.15);
  pointer-events: auto;
  border: 2rpx solid rgba(255, 255, 255, 0.8);
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rpx;
  padding: 12rpx 8rpx;
  border-radius: 32rpx;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  
  &.active {
    background: linear-gradient(135deg, #FFE5EC 0%, #F3E8FF 100%);
    transform: translateY(-4rpx);
    
    .tab-icon {
      font-size: 48rpx;
      filter: drop-shadow(0 4rpx 8rpx rgba(216, 112, 147, 0.3));
      animation: iconBounce 0.5s ease;
    }
    
    .tab-text {
      background: linear-gradient(135deg, #D87093 0%, #9370DB 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-weight: 700;
    }
  }
  
  &:active {
    transform: scale(0.95);
  }
}

.tab-icon {
  font-size: 44rpx;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  line-height: 1;
}

.tab-text {
  font-size: 22rpx;
  color: #8B7B8B;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
  letter-spacing: 0.5rpx;
}

@keyframes iconBounce {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-6rpx) scale(1.1);
  }
}
</style>

